<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item
				label="商品名称"
				required
				prop="name"
				:rules="[{ min: 2, max: 40, message: '长度2-40', tirgger: 'blur' }]"
			>
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="商品分类" required>
				<el-cascader
					v-model="form.classes"
					:options="selects"
					:props="{
						expandTrigger: 'hover',
						value: 'cat_id',
						label: 'cat_name',
					}"
					@change="onSubmit"
				></el-cascader>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { getGoodsClasses } from '@/api/goods'
// 使用辅助函数解构模块里的数据
import { createNamespacedHelpers } from 'vuex'
var { mapState } = createNamespacedHelpers('goods/')
export default {
	data() {
		return {
			form: {
				name: '',
				price: 0,
				weight: 0,
				num: 0,
				classes: '',
			},
			selects: [],
		}
	},
	props: {
		isChangeQing: {
			type: Number,
			default: 0,
		},
	},
	methods: {
		// 校验当前页面
		onSubmit() {
			// 对当前整个的表做校验
			this.$refs.form.validate((state) => {
				if (state) {
					// 1. 修改isChangeQIng 2. 把当前页的数据给vuex/父级组件
					this.$emit('update:isChangeQing', 1)
					this.$store.commit('goods/SET_GOODS', this.form)
				} else {
					this.$message.error('不可以')
				}
			})
		},
	},
	mounted() {
		getGoodsClasses().then((res) => {
			this.selects = res.data.data
		})

		// 从vuex模块中获取数据
		// console.log(this.$store.state.goods.newGoods)
		console.log(this.newGoods)
	},
	computed: {
		...mapState(['newGoods']),
	},
}
</script>

<style>
</style>